/** @type {import('tailwindcss').Config} */
export default {
	// 使用 "class" 模式时，Tailwind 会将 "dark" 类添加到根元素（通常是 <body> 元素）上，以指示页面当前处于深色模式
	darkMode: "class",
	// 通过配置 content，Tailwind CSS 将会检索和构建包含需要的 CSS 样式的文件，并生成最终的 CSS 输出文件
	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
	theme: {
		screens: {
			xs: "480px",
			sm: "576px",
			md: "768px",
			lg: "992px",
			xl: "1200px",
			"2xl": "1600px",
		},
		colors: {
			black: "#000000",
			green: "#00A76F",
			blue: "#1fb6ff",
			purple: "#7e5bef",
			pink: "#ff49db",
			orange: "#ff7849",
			yellow: "#ffc82c",
			gray: "#637381",
			hover: "#63738114",

			success: "#22C55E",
			warning: "#FFAB00",
			error: "#FF5630",
			info: "#00B8D9",

			code: "#d63384",

			"gray-100": "#F9FAFB",
			"gray-200": "#F4F6F8",
			"gray-300": "#DFE3E8",
			"gray-400": "#C4CDD5",
			"gray-500": "#F9FAFB",
			"gray-600": "#637381",
			"gray-700": "#454F5B",
			"gray-800": "#212B36",
			"gray-900": "#161C24",
		},
		extend: {
			transitionProperty: {
				height: "height",
			},
			animation: {
				"spin-slow": "spin 8s linear infinite",
			},
		},
	},
	corePlugins: {
		// Remove the Tailwind CSS preflight styles so it can use custom base style (src/theme/base.css)
		preflight: false, // https://tailwindcss.com/docs/preflight#disabling-preflight
	},
	plugins: [],
};
